<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
    <body>
    <style>
        .flex-container {
            display: flex;
            justify-content: space-between; /* 水平间隔 */
        }
        .flex-item {
            margin: 5px; /* 设置元素之间的间隔为5px */
        }

        table {
            border-collapse: separate;
            border-spacing: 0; /* 移除表格单元格之间的默认间隔 */
        }
        td {
            padding: 5px; /* 设置单元格内间隔 */
            border: 1px solid black; /* 为单元格添加边框，以便看到内间隔效果 */
        }
    </style>
    <meta charset="UTF-8">
    <title>技师详情页面</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!--    form表单的使用 -->
    <form  th:action="@{/order/generateOrderPage}" th:object="${formVo}" method="post">
    <div class="row">
        <table class="table table-hover">
            <thead>
            <div class="flex-container">
                <tr class="success">
                    <!--                <th><input type="checkbox" name="ids" th:value="${item.id}"/>全选</th>-->
                    <th>编号</th>
                    <th>头像</th>
                    <th>名字</th>
                    <th>性别</th>
                    <th>民族</th>
                    <th>身高</th>
                    <th>体重</th>
                    <th>属相</th>
                    <th>年龄</th>
                    <th>个人介绍</th>
                    <th>相册</th>
                    <th>距离</th>
                    <th>收藏</th>
                </tr>

            </div>
            </thead>
            数据显示
            <tr th:each="bean:${formVo}">
                <td th:text="${bean.tid}" th:id="${bean.tid}"></td>
                <td th:text="${bean.image}"></td>
                <td th:text="${bean.name}"></td>
                <td th:text="${bean.gender}"></td>
                <td th:text="${bean.nation}"></td>
                <td th:text="${bean.height}"></td>
                <td th:text="${bean.weight}"></td>
                <td th:text="${bean.genus}"></td>
                <td th:text="${bean.age}"></td>
                <td th:text="${bean.introduce}"></td>
                <td th:text="${bean.photo}"></td>
                <td th:text="${bean.distance}"></td>
            </tr>
        </table>
    </div>



    <div class="row">
        <table class="table table-hover">
            <thead>
            <div class="flex-container">
                <tr class="success">
                    <!--                <th><input type="checkbox" name="ids" th:value="${item.id}"/>全选</th>-->
                    <th>编号</th>
                    <th>项目图片</th>
                    <th>项目名称</th>
                    <th>项目简介</th>
                    <th>预约人数</th>
                    <th>服务时长</th>
                    <th>项目价格</th>
                    <th>操作类型</th>
                </tr>

            </div>
            </thead>
            数据显示
            <ul id="myProject">
                <tr th:each="bean:${formVo}">
                    <td th:text="${bean.pid}" th:id="${bean.pid}"></td>
                    <td th:text="${bean.image}"></td>
                    <td th:text="${bean.name}"></td>
                    <td th:text="${bean.introduction}"></td>
                    <td th:text="${bean.sell}"></td>
                    <td th:text="${bean.duration}"></td>
                    <td th:text="${bean.price}"></td>
                    <input type="hidden" name="pid" th:value="${bean.pid}" />
                    <input type="hidden" name="tid" th:value="${bean.tid}" />
                    <td><input type="submit" name="立即约单"/></td>
                </tr>
            </ul>
        </table>
    </div>
    </form>
</head>

<script type="text/javascript">

</script>
</body>
</html>